<template>
  <div class="nav-header">
    <header class="nav-fixed">
      <div class="max-container nav-wrap">
        <a class="nav-header-logo" href="/">
          <img src="@/assets/logo.png" alt="港美贸易" />
        </a>

        <a-select
          v-if="mounted"
          :value="locale"
          :options="options"
          @change="switchLanguage"
        ></a-select>
      </div>
    </header>
  </div>
</template>

<script setup>
import { useI18n } from "vue-i18n";
import { ref, onBeforeMount } from "vue";
const { locale } = useI18n();
const mounted = ref(false);

const switchLanguage = (lang) => {
  locale.value = lang;
  localStorage.setItem("locale", lang);
};

const options = [
  { value: "zh", label: "简体中文" },
  { value: "en", label: "English" },
];

// 获取存储在本地存储中的语言设置
onBeforeMount(() => {
  const savedLocale = window.localStorage.getItem("locale");
  if (savedLocale) {
    locale.value = savedLocale;
  }
  mounted.value = true;
});
</script>

<style lang="less">
.nav-header {
  height: 50px;
  .nav-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #fff;
    z-index: 1000;
    box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.2);
    .max-container {
      height: 100%;
    }
  }

  .nav-header-logo {
    height: 100%;
    padding: 14px 0;
    display: inline-block;
    img {
      width: auto;
      height: 100%;
    }
  }
}

.nav-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
